<template>
	<view class="_tbody1" >
		<uni-table border stripe emptyText="暂无更多数据">
			<!-- 表头行 -->
			<uni-tr>
				<uni-th width="100rpx" align="center">名称</uni-th>
				<uni-th width="100rpx" align="center">规格</uni-th>
				<uni-th width="100rpx" align="center">单价</uni-th>
				<uni-th width="100rpx" align="center">重量</uni-th>
				<uni-th width="100rpx" align="center">金额</uni-th>
			</uni-tr>
			<!-- 表格数据行 -->
			<uni-tr  v-for="item in detailList" :key="'detail'+item.id">
					<uni-td align="center">{{item.shopName}}</uni-td>
					<uni-td align="center">{{item.shopSpec}}</uni-td>
					<uni-td align="center">{{item.shopPrice}}</uni-td>
					<uni-td align="center">{{item.shopNumber}}</uni-td>
					<uni-td align="center">{{item.shopAmount}}</uni-td>
				</uni-tr>
		</uni-table>
	</view>
</template>

<script>
	// const app = getApp()
	import {mapGetters} from 'vuex'
	import {
		getDetail
	} from '@/api/index.js'
	import store from '@/store'; 
	export default {
		name: 'OrderDetail',
		data() {
			return {
				loading: false,
				finished: false,
				detailList: []
			}
		},
		props: {
			orderId: {
				type: Number,
				default: 0
			}
		},
		computed: {
			...mapGetters(['refresh']),
		},
		watch: {
			refresh:{
				handler(newValue, oldValue) {
					if(newValue){
						this.getOrder()
					}
				},
				immediate: true, // 立即执行一次监听器
			}
		},
		created() {
			this.getOrder()
		},
		methods: {
			async getOrder() {
				const res = await getDetail({
					orderId: this.orderId
				})
				this.detailList = res.data
				this.$emit('size',res.data.length)
				store.commit('detail/SET_REFRESH',false)
				console.log(res)
			}
		}

	}
</script>

<style scoped>
	._tbody1{
		margin-bottom: 50rpx;
	}
</style>